import React from "react";
import { useNavigate } from "react-router-dom";
import "./Header.less";
import houseImage from "../../style/img/house.png";
import MailBox from "../../style/img/mailbox.png";
import Scene from "../../style/img/scene.png";
import { Popover } from "antd";
const Header: React.FC = () => {
  const navigate = useNavigate();

  const homeButs = (
    <div className="homeButs">
      <div onClick={() => navigate("/blog")}>博客</div>
      <div onClick={() => navigate("/")}>起始页</div>
      <div onClick={() => window.open("https://www.google.com/")}>Goole</div>
    </div>
  );

  return (
    <div className="Header">
      <div className="Header_Right">
        <span>POETIZE</span>
      </div>
      <div className="Header_Left">
        <Popover
          placement="bottom"
          content={homeButs}
          className="popover-transparent"
        >
          <div className="Header_Left_Item">
            <div>
              <img src={houseImage} alt="House" width="20" height="20" />
            </div>
            <div className="Header_Left_Item_Text">
              <span>首页</span>
            </div>
          </div>
        </Popover>
        <div className="Header_Left_Item">
          <div>
            <img src={Scene} alt="House" width="20" height="20" />
          </div>
          <div className="Header_Left_Item_Text">
            <span>记录</span>
          </div>
        </div>
        <div className="Header_Left_Item">
          <div>
            <img src={MailBox} alt="House" width="25" height="25" />
          </div>
          <div className="Header_Left_Item_Text">
            <span>留言</span>
          </div>
        </div>
        <div className="Header_Left_Item">
          <div className="Header_Left_Item_Login">
            <span>登录</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
